<template>
  <div class="user-header">
    <div class="containerWid">
      <div class="left-links">
        <router-link to="/">首页</router-link>
        <router-link to="/">课程中心</router-link>
      </div>
      <div class="right-menu">
        <router-link to="/order">我的订单</router-link>
        <el-popover
          placement="top"
          trigger="hover"
        >
          <ul class="userUl">
            <li>
              <router-link to="/balance">我的余额</router-link>
            </li>
            <li @click="loginOut">退出登录</li>
          </ul>
          <div
            class="userFace"
            slot="reference"
          ><img src="@/assets/img/face.jpg"></div>
      </el-popover>
    </div>
  </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    ...mapActions(['saveUserToken']),
    loginOut() {
      this.$msgbox
        .confirm('确认退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        .then(() => {
          localStorage.setItem('userToken', '')
          this.saveUserToken('')
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
          this.$router.push('/')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
    }
  }
}
</script>
<style lang="scss">
.user-header {
  background-color: #07111b;
  height: 40px;
  line-height: 40px;
  .containerWid {
    display: flex;
    justify-content: space-between;
    a {
      color: #717a84;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;
      &:hover {
        color: #fff;
      }
    }
    .right-menu {
      display: flex;
      .userFace {
        height: 100%;
        display: inline-block;
        @include center();
        img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
